<template>
  <div class="project">
    <!-- 计划年度投资 -->
    <div class="project-part">
      <div class="project-part-title">计划年度投资</div>
    </div>

    <el-table
      :data="yearList"
      :header-cell-style="{
        background: '#F2F6FB',
        color: ' #6B767D'
      }"
    >
      <el-table-column
        label="年度"
        prop="year"
        show-overflow-tooltip
      />
      <el-table-column
        label="本年度计划投资(万元)"
        prop="planTotal"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        v-for="month in 12"
        :key="month"
        :label="month + '月'"
        :prop="'month' + month"
        show-overflow-tooltip
        align="center"
      />
    </el-table>

    <!-- 计划固定投资 -->
    <div class="project-part">
      <div class="project-part-title">计划固定投资</div>
    </div>

    <el-table
      :data="seasonList"
      :header-cell-style="{
        background: '#F2F6FB',
        color: ' #6B767D'
      }"
    >
      <el-table-column
        label="年度"
        prop="year"
        show-overflow-tooltip
      />
      <el-table-column
        label="本年度计划完成固投(万元)"
        prop="fixedTotal"
        width="220"
        show-overflow-tooltip
      />
      <el-table-column
        label="1月"
        prop="fixedOneFirst"
        show-overflow-tooltip
      />
      <el-table-column
        label="2月"
        prop="fixedOneSecond"
        show-overflow-tooltip
      />
      <el-table-column
        label="3月"
        prop="season1"
        show-overflow-tooltip
      />
      <el-table-column
        label="4月"
        prop="fixedTwoFirst"
        show-overflow-tooltip
      />
      <el-table-column
        label="5月"
        prop="fixedTwoSecond"
        show-overflow-tooltip
      />
      <el-table-column
        label="6月"
        prop="season2"
        show-overflow-tooltip
      />
      <el-table-column
        label="7月"
        prop="fixedThreeFirst"
        show-overflow-tooltip
      />
      <el-table-column
        label="8月"
        prop="fixedThreeSecond"
        show-overflow-tooltip
      />
      <el-table-column
        label="9月"
        prop="season3"
        show-overflow-tooltip
      />
      <el-table-column
        label="10月"
        prop="fixedFourFirst"
        show-overflow-tooltip
      />
      <el-table-column
        label="11月"
        prop="fixedFourSecond"
        show-overflow-tooltip
      />
      <el-table-column
        label="12月"
        prop="season4"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    detailInfo: Array
  },
  data() {
    return {
      yearList: [],
      seasonList: []
    }
  },
  watch: {
    detailInfo(val) {
      this.yearList = []
      this.seasonList = []
      if (val.length) {
        val.forEach((item) => {
          // 检查年度投资数据是否除了年份外还有其他非空数据
          const yearData = {
            year: item.year,
            planTotal: item.planTotal,
            month1: item.planOne,
            month2: item.planTwo,
            month3: item.planThree,
            month4: item.planFour,
            month5: item.planFive,
            month6: item.planSix,
            month7: item.planSeven,
            month8: item.planEight,
            month9: item.planNine,
            month10: item.planTen,
            month11: item.planEleven,
            month12: item.planTwelve
          }

          // 检查除年份外的数据是否有非空值（包括0）
          const hasYearData = [
            item.planTotal,
            item.planOne,
            item.planTwo,
            item.planThree,
            item.planFour,
            item.planFive,
            item.planSix,
            item.planSeven,
            item.planEight,
            item.planNine,
            item.planTen,
            item.planEleven,
            item.planTwelve
          ].some(
            (value) =>
              value !== null &&
              value !== undefined &&
              value !== ''
          )

          if (hasYearData) {
            this.yearList.push(yearData)
          }

          // 检查固定投资数据是否除了年份外还有其他非空数据
          const seasonData = {
            year: item.year,
            fixedTotal: item.fixedTotal,
            season1: item.fixedOne,
            season2: item.fixedTwo,
            season3: item.fixedThree,
            season4: item.fixedFour,
            fixedOneFirst: item.fixedOneFirst,
            fixedOneSecond: item.fixedOneSecond,
            fixedTwoFirst: item.fixedTwoFirst,
            fixedTwoSecond: item.fixedTwoSecond,
            fixedThreeFirst: item.fixedThreeFirst,
            fixedThreeSecond: item.fixedThreeSecond,
            fixedFourFirst: item.fixedFourFirst,
            fixedFourSecond: item.fixedFourSecond
          }

          // 检查除年份外的数据是否有非空值（包括0）
          const hasSeasonData = [
            item.fixedTotal,
            item.fixedOne,
            item.fixedTwo,
            item.fixedThree,
            item.fixedFour,
            item.fixedOneFirst,
            item.fixedOneSecond,
            item.fixedTwoFirst,
            item.fixedTwoSecond,
            item.fixedThreeFirst,
            item.fixedThreeSecond,
            item.fixedFourFirst,
            item.fixedFourSecond
          ].some(
            (value) =>
              value !== null &&
              value !== undefined &&
              value !== ''
          )

          if (hasSeasonData) {
            this.seasonList.push(seasonData)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.project {
  padding: 10px 10px 0 10px;

  .el-table {
    margin: 20px 0;
  }
}
</style>
